<template>
  <div class="bigbox">
    <!-- 盒子头部 -->
    <div class="titlebox">
      <!-- <div>{{ userinfo.orgName }}能源科技有限公司</div> -->
      <div class="div">
        <template>
          <el-select v-model="form.bizOrgName" ref="shou" class="select" :popper-append-to-body="false">
            <el-option class="option" :lable="form.bizOrgName" value="value" suffix-icon="el-icon-date">
                <el-tree
                :props="props"
                 node-key="id"
                :default-expanded-keys="[defaultExpandedKey]"
                :highlight-current="true"
                :load="loadNode"
                lazy
                @node-click="handleNodeClick"
                ref="tree"
                >
              </el-tree>
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="zhong div" style="text-align: center;"> {{ zidianname }}</div>
      <div class="div" style="text-align: right;"><span></span>{{ timeobj.year }}年{{ timeobj.month }}月{{ timeobj.date }}日 {{ timeobj.week }}</div>
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox">
      <!-- 左侧盒子 -->
      <div class="leftbox">
        <div class="little">
          <div class="img"><img src="../../assets/anquan.png" alt=""></div>
          <div class="text">
            <span class="number">{{ jibenqingkuang.userRunDays }}</span>
            <p class="day">安全运行（天）</p>
          </div>
        </div>
        <div class="little">
          <div class="img"><img src="../../assets/zhanfang.png" alt=""></div>
          <div class="text">
            <span class="green">{{ jibenqingkuang.switchroomSize }}</span>
            <p class="day">站房（个）</p>
          </div>
        </div>
        <div class="little">
          <div class="img"><img src="../../assets/bianya.png" alt=""></div>
          <div class="text">
            <span class="green">{{ jibenqingkuang.transformerSize }}</span>
            <p class="day">变压器（台）</p>
          </div>
        </div>
        <div class="little">
          <div class="img"><img src="../../assets/ronfliang.png" alt=""></div>
          <div class="text">
            <span class="yellow">{{ jibenqingkuang.userCapacity }}</span>
            <p class="day">容量（kWA）</p>
          </div>
        </div>
        <div class="little" >
          <div class="img"><img src="../../assets/jiance.png" alt=""></div>
          <div class="text">
            <span class="green">{{ zhongduanobjy.termTotal+zhongduanobjy.meterTotal }}</span>
            <p class="day">监测点（个）</p>
          </div>
        </div>
        <div class="footer">
            <div class="zianxian">
              <span class="span"></span><span>在线</span>
              <p><span>{{ zhongduanobjy.termOnline+zhongduanobjy.meterOnline}} </span> 个</p>
            </div>
            <div class="bingtu" ref="progress">
              <!-- <el-progress type="circle" :percentage="(zhongduanobjy.termOnlineRate*100)" :stroke-width="10"
              v-if="!isNaN(zhongduanobjy.termOnlineRate*100)"

              define-back-color="#4c617c" color="#14ccad" stroke-linecap="square"
              text-color="#fff" :show-text="true"
              ></el-progress>
              <div class="text">
                <span>{{ zhongduanobjy.termOnlineRate*100 }}%</span>
                <p>在线率</p>
              </div> -->

            </div>
        </div>
      </div>
      <!-- 中间盒子 -->
     <div class="moblebox">
       <div class="header">
        <!-- 电量 -->
        <div class="littlebox">
          <div class="title">电量</div>
          <div class="tanpai">
            <div class="tanone">
              <div class="little">
                <p>今日（万kWh）</p>
                <span class="green">{{ (yongdianobj.epowerCurDay/10000).toFixed(2) }}</span>
              </div>
              <div class="little">
                <p>昨日（万kWh）</p>
                <span class="yellow">{{ (yongdianobj.epowerPreDay/10000).toFixed(2) }}</span>
              </div>
            </div>
            <div class="tanone">
              <div class="little">
                <p>本月电量（万kWh）</p>
                <span class="green">{{ (yongdianobj.epowerCurMonth/10000).toFixed(2) }}</span>
              </div>
              <div class="little">
                <p>上月同期（万kWh）</p>
                <span class="yellow">{{ (yongdianobj.epowerPreMonth/10000).toFixed(2) }}</span>
              </div>
            </div>
            <div class="tanone">
              <div class="little">
                <p>本年累计（万kWh）</p>
                <span class="green">{{ (yongdianobj.epowerCurYear/10000).toFixed(2) }}</span>
              </div>
              <div class="little">
                <p>去年同期（万kWh）</p>
                <span class="yellow">{{ (yongdianobj.epowerPreYear/10000).toFixed(2) }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 负荷 -->
        <div class="littlebox">
          <div class="title">负荷</div>
          <div class="model">
            <div class="img">
              <div></div>
              <div>最高负荷</div>
              <div>平均负荷</div>
            </div>
            <div class="imgtwo">
             <div class="topp">
              <div class="c">
                <span class="span"></span><span>今日(kW)</span>
              </div>
              <div class="c green">{{ yongdianfuheobj.loadCurDayMax?(+yongdianfuheobj.loadCurDayMax).toFixed(1):'' }}</div>
              <div class="c green">{{ yongdianfuheobj.loadCurDayAvg?(+yongdianfuheobj.loadCurDayAvg).toFixed(1):'' }}</div>
             </div>
             <div class="topp">
              <div class="b">
                <span class="spanss"></span><span>昨日(kW)</span>
              </div>
              <div class="b yellow">{{ yongdianfuheobj.loadPreDayMax?(+yongdianfuheobj.loadPreDayMax).toFixed(1):'' }}</div>
              <div class="b yellow">{{ yongdianfuheobj.loadPreDayAvg?(+yongdianfuheobj.loadPreDayAvg).toFixed(1):'' }}</div>
             </div>
            </div>
            <div class="imgtwo">
             <div class="topp">
              <div class="c">
                <span class="span"></span><span>本月(kW)</span>
              </div>
              <div class="c green">{{ yongdianfuheobj.loadCurMonthMax?(+yongdianfuheobj.loadCurMonthMax).toFixed(1):'' }}</div>
              <div class="c green">{{ yongdianfuheobj.loadCurMonthAvg?(+yongdianfuheobj.loadCurMonthAvg).toFixed(1):'' }}</div>
             </div>
             <div class="topp">
              <div class="b">
                <span class="spanss"></span><span>上月(kW)</span>
              </div>
              <div class="b yellow">{{ yongdianfuheobj.loadPreMonthMax?(+yongdianfuheobj.loadPreMonthMax).toFixed(1):'' }}</div>
              <div class="b yellow">{{ yongdianfuheobj.loadPreMonthAvg ?(+yongdianfuheobj.loadPreMonthAvg).toFixed(1):''}}</div>
             </div>
            </div>
            <div class="imgtwo">
             <div class="topp">
              <div class="c">
                <span class="span"></span><span>本年(kW)</span>
              </div>
              <div class="c green">{{ yongdianfuheobj.loadCurYearMax?(+yongdianfuheobj.loadCurYearMax).toFixed(1):'' }}</div>
              <div class="c green">{{ yongdianfuheobj.loadCurYearAvg?(+yongdianfuheobj.loadCurYearAvg).toFixed(1):'' }}</div>
             </div>
             <div class="topp">
              <div class="b">
                <span class="spanss"></span><span>去年(kW)</span>
              </div>
              <div class="b yellow">{{ yongdianfuheobj.loadPreYearMax?(+yongdianfuheobj.loadPreYearMax).toFixed(1):'' }}</div>
              <div class="b yellow">{{ yongdianfuheobj.loadPreYearAvg?(+yongdianfuheobj.loadPreYearAvg).toFixed(1):'' }}</div>
             </div>
            </div>
          </div>
        </div>
        <!-- 碳排放 -->
        <div class="littlebox">
          <div class="title">碳排</div>
          <div class="tanpai">
            <div class="tanone">
              <div class="little">
                <p>今日(吨)</p>
                <span class="green">
                  {{yongdianobj.carbonEmissionCurDay?(+yongdianobj.carbonEmissionCurDay).toFixed(1):'' }}</span>
              </div>
              <div class="little">
                <p>昨日(吨)</p>
                <span class="yellow">{{ yongdianobj.carbonEmissionPreDay?(+yongdianobj.carbonEmissionPreDay).toFixed(1):'' }}</span>
              </div>
            </div>
            <div class="tanone">
              <div class="little">
                <p>本月碳排(吨)</p>
                <span class="green">{{ yongdianobj.carbonEmissionCurMonth?(+yongdianobj.carbonEmissionCurMonth).toFixed(1):'' }}</span>
              </div>
              <div class="little">
                <p>上月同期(吨)</p>
                <span class="yellow">{{ yongdianobj.carbonEmissionPreMonth?(+yongdianobj.carbonEmissionPreMonth).toFixed(1):'' }}</span>
              </div>
            </div>
            <div class="tanone">
              <div class="little">
                <p>本年累计(吨)</p>
                <span class="green">{{ yongdianobj.carbonEmissionCurYear?(+yongdianobj.carbonEmissionCurYear).toFixed(1):'' }}</span>
              </div>
              <div class="little">
                <p>去年同期(吨)</p>
                <span class="yellow">{{ yongdianobj.carbonEmissionPreYear?(+yongdianobj.carbonEmissionPreYear).toFixed(1):'' }}</span>
              </div>
            </div>
          </div>
        </div>
       </div>
       <div class="yuedu qushi">
        <!-- 月度负荷趋势 -->
        <div class="title">月度负荷趋势</div>
        <div ref="fuheqingk" class="echares219"></div>
       </div>
       <!-- 月度用能趋势 -->
       <div class="yuedu">
        <div class="title">月度用能趋势</div>
        <div ref="yongnengqushi" class="echares219"></div>
       </div>
     </div>
     <!-- 右侧盒子 -->
     <div class="rightbox">
      <div class="jiance">
        <div class="title">实时负荷监测</div>
        <div class="echarts180" ref="jiance"></div>
      </div>
      <div class="jiance">
        <div class="title">主要用电设备（TOP5）</div>
        <div class="echarts180" ref="yongdianshebei"></div>
      </div>
      <div class="baojin">
        <div class="jinshiri">报警信息</div>
        <div class="qiye" ref="qiye">
          <el-carousel trigger="click" height="390px" arrow="never">
            <el-carousel-item v-for="(list,index) in gaojinglist" :key="index">
              <div class="littlebox" v-for="(item,index) in list" :key="index">
                <div class="text"><span >{{ item.subburo }}</span>
                  <span :class="{'leixing':item.eventLevel==3,'leiyellow':item.eventLevel==2,'leigreen':item.eventLevel==1}">
                    {{ item.eventLevel==1?'轻微告警':item.eventLevel==2?'普通告警':'严重告警' }}</span></div>
                <div class="text top"><span class="fff">{{ item.alarmInfo }}:
                  <span :class="{'red':item.eventLevel==3,'yellow':item.eventLevel==2,'green':item.eventLevel==1}">报警值:
                    {{item.alarmValue }}</span></span></div>
                <div style="text-align: right;color: #fff;font-size: 12px;margin-top: 7px;">{{ item.time }}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
          </div>
      </div>
     </div>
    </div>
    <screenfull
      style="position: absolute; left: 20px; bottom:25px; z-index: 9999999"
      id="screenfull"
      @click="isScreenFull"
      >
     <el-button style="background-color: #02010d;border: none;">全屏</el-button></screenfull >
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { autoHover } from '@/utils/tooltip'	// 引入封装的函数
import { getloginapi,geidangqianapi,getzidiannameapi} from '@/api/layout'
import {
  getdianwujiben, getgongsijibenapi, getzhongduanapi, getyongdianapi,
  getyongdianfuheapi, gettreexiaji, gettreelist, getloginuserapi,getyonghuxialaapi
} from '@/api/large'
import {timeArray} from '@/utils/arr'
import screenfull from "screenfull";
export default {
  name: 'LargeIndex',

  data() {
    return {
      timeobj: {},
      gaojinglist: [],
      userinfo: {},
      jibenqingkuang: {},
      zhongduanobjy: {},
      yongdianobj: {},
      yongdianfuheobj: {},
      topfivelist: [],
      topdatalist: [],
      benyuelist: [],
      shangyuelist: [],
      benyuerilist: [],
      jinrifuhelist: [],
      shangyuerilist:[],
      props: {
        label: 'bizOrgName',
        // children: 'children'
      },
      form: { bizOrgName: '' },
      zidianname: '',
      defaultExpandedKey: '',
      fuhedata: [],
      timer: '',
      flag:false
    };
  },
  async mounted() {

    // this.zidianname=zidianobj.data.list[0]?zidianobj.data.list[0].text:'智慧用能管理平台'
    const re = await getloginuserapi()

    if (re.data.entity.orgType!=='04') {
      const res = await gettreelist()
      const ress= await gettreexiaji({ orgNo: res.data.list[0].bizOrgNo })
      this.form.bizOrgName = ress.data.list[0].bizOrgName
      this.defaultExpandedKey = res.data.list[0].id.toString()

      await this.getarrjiekou(ress.data.list[0].bizOrgNo)
      // await this.getarrjiekou('88100114')
      this.$refs.tree.setCurrentKey(ress.data.list[0].id)
      } else {
      const res = await getyonghuxialaapi()
      this.form.bizOrgName= res.data.list[0].bizOrgName
    // await this.getarrjiekou(res.data.list[0].bizOrgNo)
    await this.getarrjiekou(res.data.list[0].bizOrgNo)
    }
    this.gettime()
    this.getyuedufuhe()
    this.getyueduyongneng()
    this.getshishijiance()
    this.getzhuyaoshebei()
    this.getnewecharts()
    // this.opensettime()
  },

  methods: {
    isScreenFull() {
      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: "您的浏览器版本过低不支持全屏显示！",
          type: "warning"
        })
        return false
      }
      screenfull.toggle()
    },
    // 树组件懒加载
    async loadNode(node, resolve) {
      const re = await getloginuserapi()
      if (re.data.entity.orgType!=='04') {
        const res = await gettreelist()
      if (node.level === 0) { // 初始的级数（最顶层）
        return resolve(res.data.list) // 最顶层数据渲染为region
        }
      const ress = await gettreexiaji({ orgNo: node.data.bizOrgNo })
      if (node.level === 1) {
        return resolve(ress.data.list)
      } else if (node.level === 2) {
        return resolve([])
      }
      } else {
        if (node.level === 0) {
          const res = await getyonghuxialaapi()
        return resolve(res.data.list)
        } else {
          return resolve([])
        }
      }
    },
    async handleNodeClick(val) {
      this.form.bizOrgName = val.bizOrgName
      this.$refs.shou.blur()
      await this.getarrjiekou(val.bizOrgNo)
      // await this.getarrjiekou('88018946')
      this.flag=true
      this.getyuedufuhe()
    this.getyueduyongneng()
    this.getshishijiance()
    this.getzhuyaoshebei()
    this.getnewecharts()
    },
    // 大屏所有接口封装mounted调用
    async getarrjiekou(id) {
      const zidianobj = await getzidiannameapi({ dictType: 'PDYW_DWBM' })
      const newarr = zidianobj.data.list.filter(ele => ele.value == id)
    newarr.length?this.zidianname=newarr[0].text:this.zidianname='智慧用能管理平台'
      // 获取单位基本情况
      try {
        const dianwu = await getgongsijibenapi({ subburo: id })
        // const dianwu = await getgongsijibenapi({ subburo: '88018932' })
        // this.gaojinglist = JSON.parse(dianwu.data.entity.alarmLastDetailArray)
        const array = JSON.parse(dianwu.data.entity.alarmLastDetailArray)
        for (let i = 0; i < array.length; i += 3) {
          this.gaojinglist.push(array.slice(i, i + 3));
        }
        console.log(this.gaojinglist);
      } catch (error) {
        this.gaojinglist=[]
      }
      // 获取当前用户信息
      try {
        const userinfo =await geidangqianapi()
      this.userinfo = userinfo.data.entity
      } catch (error) {
        this.userinfo={}
      }
      // 获取单位进本信息
      try {
        const jibenqingkuang = await getdianwujiben({ subburo: id })
      this.jibenqingkuang = jibenqingkuang.data.entity
      } catch (error) {
        this.jibenqingkuang={}
      }
      // 获取单位终端情况
      try {
        const zhongduanobj = await getzhongduanapi({ subburo: id })
      this.zhongduanobjy = zhongduanobj.data.entity
      } catch (error) {
        this.zhongduanobjy ={}
      }
      // 获取用电单位用电量情况
      try {
        const yongdianobj = await getyongdianapi({ subburo: id })

        this.yongdianobj = yongdianobj.data.entity
      this.topfivelist = []
      this.topdatalist=[]
      JSON.parse(yongdianobj.data.entity.epowerDevTopArray).forEach((ele, index) => {
        if (index < 5) {
          this.topfivelist.unshift(ele.devName)
          this.topdatalist.unshift(ele.totalEpower)
        }
      })
      this.benyuelist=JSON.parse(yongdianobj.data.entity.epowerCurDayArray)
      this.shangyuelist=JSON.parse(yongdianobj.data.entity.epowerPreDayArray)
      } catch (error) {
        this.yongdianobj={}
        this.topfivelist = []
        this.topdatalist = []
        this.benyuelist = []
        this.shangyuelist=[]
      }
      // 查询用电单位负荷情况
      try {
        const yongdianfuheobj = await getyongdianfuheapi({ subburo: id })
      this.benyuerilist = JSON.parse(yongdianfuheobj.data.entity.loadCurMonthPointsArray)
      this.shangyuerilist = JSON.parse(yongdianfuheobj.data.entity.loadPreMonthPointsArray)
        this.jinrifuhelist = JSON.parse(yongdianfuheobj.data.entity.loadCurDayPointsArray)
        this.fuhedata=[]
        for (let i = 0; i < this.benyuerilist.length; i++){
          this.fuhedata.push(i+1+'号')
        }
      this.yongdianfuheobj=yongdianfuheobj.data.entity
      } catch (error) {
        this.benyuerilist = []
        this.jinrifuhelist = []
        this.yongdianfuheobj={}
        this.shangyuerilist=[]
      }
    },
    // 获取当前时间戳
    gettime() {
      var now = new Date();
          var year = now.getFullYear(); //得到年份
          var month = now.getMonth()+1;//得到月份
          var date = now.getDate();//得到日期
          var day = now.getDay();//得到周几
          var week;
          var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
          week = arr_week[day];
       this.timeobj={year,month,date,week}
    },
    // 月度负荷趋势
    getyuedufuhe() {
      var chartDom = this.$refs.fuheqingk
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(50,50,50,0.3)',
          textStyle: {
            color:'#fff'
          }
        },
        legend: {
          data: ['KW']
        },
        grid: {
          left: '1%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.fuhedata
        },
        yAxis: {
          axisLine:{show: true},
          splitLine: {
            //网格线
            lineStyle: {
              type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
              color:'#333'
            },
            show: true //隐藏或显示
          },
          type: 'value',
          axisLine: { show: true },
              name: '(KW)',
              type: 'value'
        },
        series: [
          {
            name: '本月负荷',
            type: 'line',
            // symbol: 'none',
            symbolSize:'0',
            data:this.benyuerilist,
            itemStyle: {
              color: '#11966a'
            },
            areaStyle: {
              normal: {
                //前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#156c6d' },
                    { offset: 1, color: 'rgba(63, 208, 249, 0)' }
                  ]
                )
              }
            }
          },
          {
            name: '上月负荷',
            type: 'line',
            // symbol: 'none',
            symbolSize:'0',
            data:this.shangyuerilist,
            itemStyle: {
              color: '#5fe1f5'
            },
            areaStyle: {
              normal: {
                //前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#3ea3bc' },
                    { offset: 0.9, color: 'rgba(63, 208, 249, 0)' }
                  ]
                )
              }
            }
          }
        ]
      };
      // option && myChart.clear()
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
        myChart.resize();
      });
      autoHover(myChart,option,31,3000,this.flag)
    },
    // 月度用能趋势
    getyueduyongneng() {
      var chartDom = this.$refs.yongnengqushi
      var myChart = echarts.init(chartDom);
      const newarr =[]
      for (let i = 0; i < this.benyuelist.length; i++) {
        newarr.push(i+1+'号')
      }
        var option;
        option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(50,50,50,0.3)',
          textStyle: {
            color:'#fff'
          }
        },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          // legend: {left:'right'},
          xAxis: [
            {
              type: 'category',
              data:  newarr,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              splitLine: {
                //网格线
                lineStyle: {
                  type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                  color:'#333'
                },
                show: true //隐藏或显示
              }
            }
          ],

          series: [
            {
              name: '本月用电量',
              color:'#fff',
              type: 'bar',
              barWidth: '60%',
              // data: [50,60,90,18,350,42,260,97,260,314,185],
              data:this.benyuelist,
              itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#1394f0'                   //指0%处的颜色
                    }, {
                        offset: 1, color: '#0d1f37'                 //指100%处的颜色
                    }], false)
                }
             }
            },
            {
            name: '上月用电量',
            type: 'line',
              // symbol: 'none',
              symbolSize:'0',
              smooth: true,
              // data:[50,80,90,60,23,70,58],
            data:this.shangyuelist,
            itemStyle: {
              color: '#bea811'
              // color:'#fff'
            },

          }
          ]
        };
        option && myChart.clear()
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        //图表响应处理
        myChart.resize();
      });
      autoHover(myChart,option,31,3000,this.flag)
    },
    // 试试负荷监控
    getshishijiance() {
      var chartDom = this.$refs.jiance
      var myChart = echarts.init(chartDom);

      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(50,50,50,0.3)',
          textStyle: {
            color:'#fff'
          }
        },
        legend: {
          data: ['kW']
        },
        grid: {
          left: '1%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data:timeArray
        },
        yAxis: {
          axisLine:{show: true},
          splitLine: {
            //网格线
            lineStyle: {
              type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
              color:'#333'
            },
            show: true //隐藏或显示
          },
          type: 'value',
          axisLine: { show: true },
              name: '(kW)',
          type: 'value',

        },
        series: [
          {
            name: '实时负荷',
            type: 'line',
            // symbol: 'none',
            symbolSize:'0',
            smooth: true,
            data:this.jinrifuhelist,
            lineStyle: {
              color: '#1697da'
            },
            areaStyle: {
              normal: {
                //前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: 'rgba(12,180,250, 1)' },
                    { offset: 1, color: 'rgba(63, 208, 249, 0)' }
                  ]
                )
              }
            }
          }
        ]
      };
      option && myChart.clear()
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
        myChart.resize();
      });
      const num = this.jinrifuhelist.filter(ele => ele).length
      autoHover(myChart,option,num,3000,this.flag)
    },
    // 主要用电设备
    getzhuyaoshebei() {
      var chartDom = this.$refs.yongdianshebei
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(50,50,50,0.3)',
          textStyle: {
            color:'#fff'
          }
        },
        legend: {},
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          top:'3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            //网格线
            lineStyle: {
              type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
              color:'#333'
            },
            show: true //隐藏或显示
          },
          axisLabel: {
            color: '#fff' // 设置Y轴字体颜色为蓝色
        }
        },
        yAxis: {
          type: 'category',
          axisTick: { show: false },//不显示y轴刻度
          // data: [, '企业4', '企业3', '企业2', '企业1'],
          data: this.topfivelist,
          axisLabel: {
            color: '#fff' // 设置Y轴字体颜色为蓝色
        }
        },
        series: [
          {
            name: '',
            type: 'bar',
            // data: [150, 200, 240, 230, 180],
            data:this.topdatalist,
            itemStyle: {
                normal: {
                    color: function(params) {
                        // 给出颜色组
                        // var colorList = ['#2972c1','#24a4af','#15ddb9','#8ad95e','#d9c562'];
                    // return colorList[params.dataIndex]
                    var colorList = [
                    ['#2972c1','#242834'],['#24a4af','#242834'], ['#15ddb9','#242834'], ['#8ad95e','#242834'],
                  ['#d9c562','#242834'],
                ]
                var index = params.dataIndex
                // 柱子个数超过colorList设置的个数，循环使用
                // if (index >= colorList.length) {
                //   index =index - colorList.length
                // }
                // 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 1,
                  color: colorList[index][0]
                }, {
                  offset: 0,
                  color: colorList[index][1]
                }])
                    },
                }
            }
          }
        ]
      };
      option && myChart.clear()
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
    myChart.resize();
  });
    },
     // 测试新款echarts
     getnewecharts() {
      var chartDom = this.$refs.progress
      var myChart = echarts.init(chartDom);
      var option;


       var value = this.zhongduanobjy.allOnlineRate //当前进度
      var maxvalue = 100; //进度条最大值
      //指定图标的配置项和数据
      var option = {
        title: {
          text: '在线率',
          left: 'center',
          // bottom:'0'
          top: '53%',
          textStyle: {
            color: 'black',
            fontSize: 16,
            fontWeight:100
          }
        },
        //饼图中间显示文字
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: value + '%', //文字内容
              fill: "#62daad",//文字颜色
            fontSize: 22, //文字字号
            // fontWeight: '600'
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.3)',
          textStyle: {
            color:'#fff'
          }
        },
        series: [
          {
            //第一张圆环
            name: '在线率',
            type: 'pie',
            radius: ['75%', '80%'],
            center: ['50%', '50%'],
            // 隐藏指示线
            labelLine: { show: false },
            //隐藏圆环上文字
            label: {
              show: false
            },
            data: [
              //value当前进度 + 颜色
              {
                name: '在线',
                value: value,
                itemStyle: {
                  normal: { color: '#62daad' }
                }
              },
              {
                name: '离线',
                value:value? maxvalue - value:0,
                itemStyle: {
                  normal: { color: '#ededed' }
                }
              }
            ]
          }
        ]
      }
      option && myChart.clear()
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
          //图表响应处理
          myChart.resize();
        });
    },
    // 告警列表滚动
    infinitScroll () {
      // 拿到表格挂载后的真实DOM
        // const table = document.getElementById(dom);
        const table = this.$refs.qiye
        // 拿到表格中承载数据的div元素
          const divData = table
        divData.onmouseover = function () {
        clearInterval(t)
        } //鼠标移入，停止滚动
        divData.onmouseout = function () {
                start()
              } //鼠标移出，继续滚动
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动2像素)
        let t
        function start () {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight > divData.scrollHeight) {
          return
          }
        t = setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 2
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop > divData.scrollHeight-1) {
        // 重置table距离顶部距离
          divData.scrollTop = 0
            }
          }, 100)
        }
        start()
    },
    // 开启定时器
    opensettime(myChart, array) {
      let bum=0
      this.timer = setInterval(() => {
        if (bum==array.length||!array[bum]) {
          bum = 0
        }
      this.dispatchActionChart("hideTip", bum,myChart);
      this.dispatchActionChart("showTip", bum,myChart);
      bum+=1
      }, 500);
    },
  // 设置轮播
   dispatchActionChart(type, dataIndex,myChart) {
      myChart.dispatchAction({
        type: type,
        seriesIndex: 0,
        dataIndex: dataIndex,
      });
    },
  },
  // 组件销毁，清除定时器
   beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
// 在src/assets/css/global.css中将下载号的字体引入
@font-face {
    font-family: NumFont;
    /* src: url('../fonts/flatNum.ttf'); */
    src: url('../../assets//font/font/UnidreamLED.woff');
    unicode-range: U+30-39;
}
::v-deep .el-select-dropdown{
  background-color: rgba(1, 28, 82, 0.8);
}
::v-deep  .el-icon-arrow-up{
display: none;
}
::v-deep .el-input__inner{
  width: 300px;
    background: url(../../assets/mulu.png) no-repeat center center; //引入icon
    background-size: 17px 19px;  //这个是图片的大小，在这里不能直接设置width  height,设置宽高其实是select的宽高，图片可能会失真只设置宽度  高度auto也行
    background-position:right; //在input中定位置  可以调整自定义icon的左右上下位置
    padding: 0 0 0 26px; //需要设置padding 把placeholder向右移
    box-sizing: border-box;
    font-size: 14px;
    border: none;
    color: #fff;
    font-size: 16px;
  }
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.option{
  height: auto;

  // opacity: 0.1;
}
.bigbox{
  // width: 100%;
  // height: 100%;
  position: relative;
  width: 1920px;
  height: 1080px;
  background-image: url('/src/assets/tucen.png');
  background-size: cover; /* 背景图覆盖整个页面 */
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 背景图不重复 */
 .titlebox{
  height: 94px;
  background-image: url('/src/assets/titleimg.png');
  background-size: cover; /* 背景图覆盖整个页面 */
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 背景图不重复 */
  display: flex;
  // justify-content: space-between;
  .div{
    width: 33.3%;
  }
  color: #fff;
  padding: 10px 30px;
  .zhong{
    font-size: 30px;
    padding-top: 17px;
  }
 }
 .bodybox{
  padding: 20px;
  display: flex;
  .leftbox{
    width: 329px;
    height: 940px;
    background: rgba(28,58,109,0.3);
    padding: 40px 40px 30px 40px;

    .little{
      height: 95px;
      margin-bottom: 54px;
      display: flex;
      .text{
      margin-left: 30px;
      .number{
        color: #26BF59;
        font-size: 48px;
        font-family: NumFont !important;
      }
      .green{
        color: #00C9C9;
        font-size: 48px;
        font-family: NumFont !important;
      }
      .yellow{
        color: #F99D31;
        font-size: 48px;
        font-family: NumFont !important;
      }
      .day{
        color: #E4E4E4;
        font-size: 18px;
      }
    }
    }
    .footer{
      height: 120px;
      display: flex;
      .zianxian{
        color: #FFFFFF;
        font-size: 18px;
        padding-top: 30px;
        .span{
          display: inline-block;
          width: 4px;
          height: 14px;
          background: linear-gradient(0deg, #12B380, #82D9BD);
          border-radius: 2px;
          margin-right: 10px;
        }
        p{
          padding-left: 15px;
          font-size: 12px;
          margin-top: 10px;
          span{
            color: #12B380;
            font-size: 18px;
          }
        }
      }
      .bingtu{
        margin-left: 40px;
          width: 50%;
          text-align: center;
          // padding-top: 40px;
          position: relative;
          .text{
            color: #fff;
            position: absolute;
            left: 30%;
            top: 30%;
          }
        }
    }
  }
  .moblebox{
    width: 1103px;
    padding: 0 20px;

    .header{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .littlebox{
        width: 341px;
        height: 382px;
        background: rgba(28,58,109,0.3);
        .title{
          width: 341px;
          height: 40px;
          background:  linear-gradient(to right, #0b528a, #070e27) center center no-repeat;
        padding-left: 10px;
        color: #fff;
        line-height: 40px;
        }
        .text{
          padding: 15px;
          .img{
            width: 312px;
            height: 97px;
            padding: 25px 20px;
            // background-image: url('../../assets/large/tanpai.png');
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            color: #fff;
            font-size: 14px;
            .little{
              text-align: center;
              background-image: url('../../assets/large/tanpai.png');
              width: 150px;
              .span{
                color: #6CE1F5;
                font-size: 24px;
              }
              .spans{
                color: #E59B45;
                font-size: 24px;
              }
            }
          }
        }
        .model{
          padding: 18px;
          .img{
            width: 301px;
            height: 30px;
            margin-bottom: 10px;
            background-image: url('../../assets/large/fuheone.png');
            display: flex;
            justify-content: space-between;
            color: #fff;
            line-height: 30px;
            div{
              width: 100px;
              text-align: center;
            }
          }
          .imgtwo{
            width: 301px;
            height: 82px;
            margin-bottom: 10px;
            background-image: url('../../assets/large/fuhetwo.png');
            padding: 10px 0;
            .topp{
              display: flex;
            justify-content: space-between;
            text-align: center;
            color: #fff;
            font-size: 14px;
            .c{
              width: 100px;
              line-height: 30px;
              .span{
                display: inline-block;
                width: 8px;
                height: 8px;
                background: #6CE1F5;
                border-radius: 50%;
                margin-right: 5px;
              }
            }
            .b{
              width: 100px;
              line-height: 30px;
              .spanss{
                display: inline-block;
                width: 8px;
                height: 8px;
                background-color: #E59B45;
                border-radius: 50%;
                margin-right: 5px;
              }
            }
            .yellow{
              color: #E59B45;
              font-size: 24px;
            }
            .green{
              color: #6CE1F5;
              font-size: 24px;
            }
            }

          }
        }
        .tanpai{
          padding: 15px;
          .tanone{
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .little{
              width: 152px;
              height: 96px;
              background-image: url('../../assets/large/tanpai.png');

              padding-top: 25px;
              text-align: center;
              // line-height: 96px;
              color: #fff;
              font-size: 14px;
              .green{
                font-size: 24px;
                color: #6CE1F5;
              }
              .yellow{
                font-size: 24px;
                color: #E59B45;
              }
            }
          }
        }
      }
    }
    .yuedu{
      width: 1063px;
      height: 259px;
      background: rgba(28,58,109,0.3);
      .title{
        width: 1063px;
          height: 40px;
          background:  linear-gradient(to right, #0b528a, #070e27) center center no-repeat;
        padding-left: 10px;
        color: #fff;
        line-height: 40px;
      }
    }
    .qushi{
      margin-bottom: 20px;
    }
  }
  .rightbox{
    .jiance{
      width: 445px;
      height: 220px;
      background: rgba(28,58,109,0.3);
      margin-bottom: 20px;
      .title{
        width: 445px;
          height: 40px;
          background:  linear-gradient(to right, #0b528a, #070e27) center center no-repeat;
        padding-left: 10px;
        color: #fff;
        line-height: 40px;
      }
    }
    .baojin{
      width: 445px;
      height: 460px;
      background: rgba(28,58,109,0.3);
      .jinshiri{
        width: 445px;
          height: 40px;
          background:  linear-gradient(to right, #0b528a, #070e27) center center no-repeat;
        padding-left: 10px;
        color: #fff;
        line-height: 40px;
      }
      .qiye{
        background: rgba(28,58,109,0.2);
        // opacity: 0.7;
        // height: 100%;
        padding:20px 10px 10px 10px;
        // overflow-x: hidden;
        // overflow-y: scroll;
        box-sizing: border-box;
        height: 420px;
      overflow-x: hidden;
        overflow-y: scroll;
        .littlebox{
          // height: 90px;
          // background: #99D5FF;
          background: rgba(28,58,109,0.3);
          padding: 10px;
          margin-bottom: 20px;
          .top{
            margin-top: 10px;
          }
          .text{
            font-size: 14px;
            color: #fff ;
            display: flex;
            justify-content: space-between;
            // text-align: justify;
            box-sizing: border-box;
            .red{
              color: red;
              font-size: 12px;
            }
            .fff{
              font-size: 12px;
              // text-align: right;
            }
            .leixing{
              text-align: right;
              border-radius: 30px;
              border: 1px solid red;
              color: red;
              padding: 1px 5px;
            }
            .green{
             color: #2BCDD9;
            }
            .leigreen{
              border-radius: 30px;
              border: 1px solid #2BCDD9;
              color: #2BCDD9;
              padding: 1px 5px;
            }
            .leiyellow{
              border-radius: 30px;
              border: 1px solid #FF8432 ;
              color: #FF8432 ;
              padding: 1px 5px;
            }
            .yellow{
              color: #FF8432 ;
            }
          }
        }
      }
    }
  }
 }
}

::v-deep .caijishebei .el-progress__text{
  display: none;
}
::v-deep  .el-progress__text{
  display: none;
}
.qiye::-webkit-scrollbar {
        display: none;
    }
    .echares219{
      height: 219px;
    }
    .echarts180{
      height: 180px;
    }
    ::v-deep .el-progress-circle{
      width: 118px !important;
      height: 118px !important;
    }
    ::v-deep .el-carousel__indicators {
  overflow: hidden;
  white-space: nowrap;
}

::v-deep .el-carousel__indicators li {
  display: inline-block;
  margin-right: 5px; /* 可以根据需要调整间距 */
}
</style>